<!--经典电影-->
<template>
  <div class="container">
    <div class="movie_box w_container">
      <div class="lt">
        <div class="infinite-list-wrapper" style="overflow:auto">
          <ul class="list" v-infinite-scroll="load" infinite-scroll-disabled="disabled">
            <li v-for="i in count" class="list-item" :key="i">
              <Item />
            </li>
          </ul>
          <p class="tips" v-if="loading">加载中...</p>
          <p class="tips" v-if="noMore">我是有底线的</p>
        </div>
      </div>
      <div class="rt">
        <div class="recommend_cont">
          <PugTitle title="热门推荐" />
          <ul class="recommend_list">
            <li>
              <span class="tp">【法国】</span>
              <span class="tt">朝花惜拾</span>
              <span class="tm">剧情片</span>
            </li>
            <li>
              <span class="tp">【法国】</span>
              <span class="tt">朝花惜拾</span>
              <span class="tm">剧情片</span>
            </li>
            <li>
              <span class="tp">【法国】</span>
              <span class="tt">朝花惜拾</span>
              <span class="tm">剧情片</span>
            </li>
          </ul>
        </div>
      </div>
    </div>
  </div>
</template>
<script>
import Item from "./movieItem";
import PugTitle from "@/components/zTitle/pugIndex";

export default {
  components: {
    Item,
    PugTitle,
  },
  data() {
    return {
      count: 10,
      loading: false,
    };
  },
  computed: {
    noMore() {
      return this.count >= 20;
    },
    disabled() {
      return this.loading || this.noMore;
    },
  },
  methods: {
    load() {
      this.loading = true;
      setTimeout(() => {
        this.count += 2;
        this.loading = false;
      }, 2000);
    },
  },
};
</script>
<style lang="scss" scoped>
.movie_box {
  margin-top: 20px;
  position: relative;
  .lt {
    padding-right: 300px;
    padding-bottom: 50px;
    .list {
      background-color: #ffffff;
      .list-item {
      }
    }
  }
  .rt {
    position: absolute;
    right: 0;
    top: 0;
    width: 300px;
    padding-left: 12px;
    .recommend_cont {
      background-color: #ffffff;
      .recommend_list {
        padding: 0 10px;
        li {
          height: 39px;
          line-height: 39px;
          cursor: default;
          display: flex;
          flex-direction: row;
          &:not(:last-child) {
            border-bottom: 1px solid #f1f1f1;
          }
          .tm {
            font-size: 12px;
            color: #666;
            vertical-align: middle;
          }
          .tt {
            font-size: 16px;
            flex: 1;
            vertical-align: middle;
          }
          .tp {
            font-size: 14px;
            vertical-align: middle;
            color: $primary_clr;
          }
        }
      }
    }
  }
}
</style>
